<template>
  <el-row>
    <el-col :span="24">
      <Portlet>
        <el-form ref="searchForm" class="el-form-col el-form-s search-form" :model="search">
          <el-row :gutter="15" style="position:relative;">

            <el-col :span="4" style="position: absolute">
              <el-form-item prop="orderNo">
                <el-input v-model="search.orderNo" type="textarea" :rows="4" placeholder="订单号  (支持多单查询，用英文逗号分隔)"
                          clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset=4>
              <el-form-item prop="consigneName">
                <el-input v-model="search.consigneName" placeholder="客户姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="consignePhone">
                <el-input v-model="search.consignePhone" placeholder="客户电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="businessNo">
                <el-select v-model="search.businessNo" clearable placeholder="业务类型">
                  <el-option
                    v-for="item in businessArr"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="serviceNo">
                <el-select multiple v-model="search.serviceNo" filterable placeholder="服务类型">
                  <el-option v-for="item in serviceArr"
                             :key="item.value"
                             :label="item.text"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-row class="search-btns" :gutter="5">
                <el-col :span="8">
                  <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="info" @click="resetFields" plain>重置</el-button>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4" :offset="4">
              <el-form-item prop="serviceName" >
                <el-input v-model="search.serviceName" placeholder="服务方"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="servicePhone" >
                <el-input v-model="search.servicePhone" placeholder="服务方电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="addressArr">
                <CascadeAddress v-model="search.addressArr" :level="3" changeOnSelect placeholder="客户地址"/>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="signStartTime">
                <el-date-picker type="date"
                                placeholder="签收开始时间"
                                v-model="search.signStartTime"
                                value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="signEndTime">
                <el-date-picker type="date"
                                placeholder="签收结束时间"
                                v-model="search.signEndTime"
                                value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-collapse-transition>
            <div v-show="isOpen">
              <el-row :gutter="15">
              </el-row>
            </div>
          </el-collapse-transition>
        </el-form>
      </Portlet>
    </el-col>
    <el-col :span="24">
      <BasicTable
        title="列表"
        ref="BasicTable"
        url="/ms-terminal-order/bidding/service-end-order-list"
        :initParams="initParams"
        @selection-change="selectionChange"
        :columns="columns">
        <template slot="preColumn">
          <el-table-column prop="orderNo" fixed="left" width="170px" align="center" label="服务单号">
            <template slot-scope="scope">
              <a href="javascript: void (0);" @click.prevent="show(scope.row)">
                {{ scope.row.orderNo }}
              </a>
            </template>
          </el-table-column>
        </template>
        <template slot="column">
          <el-table-column fixed="right" align="center" width="100px" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="evaluation(scope.row)"
              >
                确认评价
              </el-button>
            </template>
          </el-table-column>
        </template>
      </BasicTable>
    </el-col>
  </el-row>
</template>
<script>
import {copy, dotData} from '@/utils'
import {filterSecond, filterDataBaseDictionary, unixTimestampFilter, decimalNumFilter} from '@/filters'
import {getOmsBusinessList, getServiceType} from '@/utils/selectOptions'
export default {
  name: 'serviceOrdersIndex',
  components: {
  },
  filters: {
    decimalNumFilter,
    filterSecond,
    filterDataBaseDictionary
  },
  data() {
    let columns = [
      {
        label: '业务类型',
        data: 'business'
      },
      {
        label: '服务类型',
        data: 'service'
      },
      {
        label: '服务方',
        data: 'serviceName'
      },
      {
        label: '服务方电话',
        data: 'servicePhone'
      },
      {
        label: '服务费',
        data: 'price'
      },
      {
        label: '客户姓名',
        data: 'consigneName'
      },
      {
        label: '客户电话',
        data: 'consignePhone'
      },
      {
        label: '客户地址省/市/区',
        data: 'consigneProvince+consigneCity+consigneDistrict',
        render(data, full) {
          return `${full.consigneProvince} ${full.consigneCity} ${full.consigneDistrict}`
        }
      },
      {
        label: '商品数量',
        data: 'productNum'
      },
      {
        label: '总包件',
        data: 'packageNum'
      },
      {
        label: '签收时间',
        data: 'signTime',
        render(data, type, full, meta) {
          return unixTimestampFilter(data, 'YYYY-MM-DD HH:mm')
        }
      }
    ]
    let initParams = {
    }
    return {
      searchLoading: false,
      initParams,
      businessArr: [],
      serviceArr: [],
      routeName: this.$route.name,
      search: {
        orderNo: '',
        consigneName: '',
        consignePhone: '',
        businessNo: '',
        serviceNo: '',
        signStartTime: '',
        signEndTime: '',
        addressArr: [],
        serviceName: '',
        servicePhone: ''
      },
      rows: [],
      idArr: [],
      isOpen: false,
      columns
    }
  },
  computed: {
  },
  created() {
    // 业务类型
    getOmsBusinessList().then(arr => {
      this.businessArr = arr
    })
    // 服务类型
    getServiceType().then(arr => {
      this.serviceArr = arr
    })
  },
  methods: {
    show(data) {
      this.$router.push({path: '/ss-oms/orders/expatriate/confirming/show/' + data.id, query: {orderId: data.orderId}})
    },
    evaluation(data) {
      this.$router.push({path: '/ss-oms/orders/expatriate/confirming/show/' + data.id, query: {orderId: data.orderId, tab: 2}})
    },
    searchFunc(search) {
      let data = copy(search, true)
      data.serviceNo = data.serviceNo.join(',')
      // 处理地址
      data.consigneProvinceNo = dotData(data.addressArr, '[0]') || ''
      data.consigneCityNo = dotData(data.addressArr, '[1]') || ''
      data.consigneDistrictNo = dotData(data.addressArr, '[2]') || ''
      delete data.addressArr
      this.searchLoading = true
      this.$refs.BasicTable.search(data).finally(_ => {
        this.searchLoading = false
      })
    },
    // 重置表单
    resetFields() {
      const searchForm = this.$refs.searchForm
      if (searchForm) {
        searchForm.resetFields()
      }
    },
    // 表格刷新
    refresh() {
      this.searchFunc(this.search)
    },
    selectionChange(rows) {
      this.rows = rows
    },
    // reset 重置搜索框
    reset(searchForm) {
      this.$refs.searchForm.resetFields()
    }
  }
}
</script>
